<template>
  <div class="approverInfo">
    <div class="table">
      <el-table :data="tableData" height="100%" border style="width: 100%">
        <el-table-column prop="id" label="id" width="40"> </el-table-column>
        <el-table-column prop="name" label="请假人"> </el-table-column>
        <el-table-column label="请假类型">
          <template slot-scope="scope">
            {{ scope.row.leaveType === 0 ? "事假" : "病假" }}
          </template>
        </el-table-column>
        <el-table-column label="开始时间">
          <template slot-scope="scope">
            {{ dateFormat(scope.row.startTime) }}
          </template>
        </el-table-column>
        <el-table-column label="结束时间">
          <template slot-scope="scope">
            {{ dateFormat(scope.row.endTime) }}
          </template>
        </el-table-column>
        <el-table-column label="相距天数">
          <template slot-scope="scope">
            {{ getDiffDay(scope.row.startTime, scope.row.endTime) }}
          </template>
        </el-table-column>
        <el-table-column
          :filters="[
            { text: '审核中', value: '0' },
            { text: '通过', value: '1' },
            { text: '驳回', value: '2' },
          ]"
          :filter-method="filterTag"
          label="审批状态"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type === 0">审核中</el-tag>
            <el-tag v-if="scope.row.type === 1" type="success">通过</el-tag>
            <el-tag v-if="scope.row.type === 2" type="danger">驳回</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.type === 0">
              <el-button
                type="success"
                size="small"
                @click.stop="argee(scope.row)"
                >通过</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click.stop="noArgee(scope.row)"
                >驳回</el-button
              >
            </div>
            <div v-else-if="scope.row.type === 1">
                <el-tag type="success">已通过</el-tag>
            </div>
            <div v-else-if="scope.row.type === 2">
                <el-tag  type="danger">已驳回</el-tag>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { approver, getApprovers } from "@/api/approver";
import { getUserInfo } from "@/utils/auth";
import { dateFormat } from "@/utils/utils";

export default {
  name: "approverInfo",
  data() {
    return {
      tableData: [],
    };
  },
  components: {},
  props: {},
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {
    this.init();
  },
  methods: {
    async init() {
      const userInfo = JSON.parse(getUserInfo());
      const obj = {
        approver_user_id: userInfo.id,
      };
      await getApprovers(obj).then((res) => {
        this.tableData = res.data;
      });
      this.dateFormat();
    },
    dateFormat(time) {
      return dateFormat(time);
    },
    // 计算两天相差天数
    getDiffDay(start, end) {
      let startTime = new Date(start);
      let endTime = new Date(end);
      let diffDay = Math.abs(startTime - endTime);
      let toolDays = Math.floor(diffDay / (1000 * 3600 * 24));
      return toolDays;
    },
    // 表格筛选
    filterTag(value, row) {
      return row.type == value;
    },
    // 审批通过
    argee(item){
        const obj = {
            id:item.id,
            type:1
        }
        approver(obj).then(res=>{
            if(res.status === 0){
                this.$message.success(res.message)
                this.init()
            }
        })
    },
    //审批未通过
    noArgee(item){
        const obj = {
            id:item.id,
            type:2
        }
        approver(obj).then(res=>{
            if(res.status === 0){
                this.$message.success(res.message)
                this.init()
            }
        })
    }
  },
};
</script>
<style lang='less' scoped>
.table {
  height: 100%;
}
.approverInfo {
  height: 100%;
}
</style>